<template>
  <div class="container-questionsChoice">
    <!-- 卡片视图 -->
    <el-card>
      <!-- 按钮部分 -->
      <span class='oop'>王浩颖</span>
      <el-button
        type="success"
        size="small"
        icon="el-icon-edit"
        @click="$router.push({ path: 'new' })"
      >
        新增试题
      </el-button>
      <!-- form表单部分 -->
      <el-form label-width="80px" size="small">
        <el-row>
          <!-- 学科 -->
          <el-col :span="6">
            <div class="grid-content">
              <el-form-item label="学科" label-width="80px">
                <el-select
                  placeholder="请选择"
                  v-model="reqParams.subjectID"
                  @change="changeSubject"
                >
                  <el-option
                    v-for="item in subjectOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <!-- 二级目录 -->
          <el-col :span="6">
            <div class="grid-content">
              <el-form-item label="二级目录" label-width="80px">
                <el-select placeholder="请选择" v-model="reqParams.catalogID">
                  <el-option
                    v-for="item in directoryOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <!-- 标签 -->
          <el-col :span="6">
            <div class="grid-content">
              <el-form-item label="标签" label-width="80px">
                <el-select placeholder="请选择" v-model="reqParams.tags">
                  <el-option
                    v-for="item in tagOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <!-- 关键字 -->
          <el-col :span="6">
            <div class="grid-content">
              <el-form-item label="关键字" label-width="80px">
                <el-input
                  v-model="reqParams.keywords"
                  placeholder="根据关键字搜索"
                ></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <!-- 试题类型 -->
          <el-col :span="6">
            <div class="grid-content">
              <el-form-item label="试题类型" label-width="80px">
                <el-select
                  placeholder="请选择"
                  v-model="reqParams.questionType"
                >
                  <el-option
                    v-for="item in questionTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <!-- 难度 -->
          <el-col :span="6">
            <div class="grid-content">
              <el-form-item label="难度" label-width="80px">
                <el-select placeholder="请选择" v-model="reqParams.difficulty">
                  <el-option
                    v-for="item in diffOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <!-- 方向 -->
          <el-col :span="6">
            <div class="grid-content">
              <el-form-item label="方向" label-width="80px">
                <el-select placeholder="请选择" v-model="reqParams.direction">
                  <el-option
                    v-for="item in directionOptions"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <!-- 录入人 -->
          <el-col :span="6">
            <div class="grid-content">
              <el-form-item label="录入人" label-width="80px">
                <el-select placeholder="请选择" v-model="reqParams.creatorID">
                  <el-option
                    v-for="item in userOptions"
                    :key="item.id"
                    :label="item.username"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <!-- 题目备注 -->
          <el-col :span="6">
            <div class="grid-content">
              <el-form-item label="题目备注" label-width="80px">
                <el-input v-model="reqParams.remarks"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <!-- 企业简称 -->
          <el-col :span="6">
            <div class="grid-content">
              <el-form-item label="企业简称" label-width="80px">
                <el-input v-model="reqParams.shortName"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <!-- 城市 -->
          <el-col :span="6">
            <div class="grid-content">
              <el-form-item label="城市" label-width="80px" prop="city">
                <div style="display:flex">
                <el-select
                  v-model="reqParams.province"
                  @change="handleCity"
                  placeholder="请选择"
                  class="city space"
                  filterable
                >
                  <el-option
                    v-for="item in cityOptions"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
                <el-select
                  v-model="reqParams.city"
                  style="margin-left: 5px;"
                  placeholder="请选择"
                  class="city"
                  filterable
                >
                  <el-option
                    v-for="item in areaOptions"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
                </div>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content">
              <el-form-item style="float:right">
                <el-button type="primary" @click="handleFilter()">
                  搜索
                </el-button>
                <el-button @click="clear()">清除</el-button>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <!-- tab栏切换部分 -->
      <el-tabs
        v-model="reqParams.chkState"
        type="card"
        @tab-click="handleClick"
      >
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane label="待审核" name="0"></el-tab-pane>
        <el-tab-pane label="已审核" name="1"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
      </el-tabs>
      <!-- 警示区域 -->
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        show-icon
        :closable="false"
      ></el-alert>
      <!-- table表格区域 -->
      <el-table :data="questions" style="width: 100%;margin-top:10px">
        <el-table-column prop="number" label="试题编号" width="260">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="160">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="160">
        </el-table-column>
        <el-table-column label="题型" width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.questionType === '1'">单选</div>
            <div v-else-if="scope.row.questionType === '2'">多选</div>
            <div v-else>简答</div>
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干" width="260">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="200">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column label="难度" width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.difficulty === '1'">简单</div>
            <div v-else-if="scope.row.difficulty === '2'">一般</div>
            <div v-else>困难</div>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="150">
        </el-table-column>
        <el-table-column label="审核状态" width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.chkState === 0">待审核</div>
            <div v-else-if="scope.row.chkState === 1">已审核</div>
            <div v-else>已拒绝</div>
          </template>
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width="150">
        </el-table-column>
        <el-table-column prop="chkUser" label="审核人" width="150">
        </el-table-column>
        <el-table-column label="发布状态" width="120">
          <template slot-scope="scope">
            <div v-if="scope.row.publishState === 1">待发布</div>
            <div v-else-if="scope.row.publishState === 2">已发布</div>
            <div v-else>已发布</div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="240" align="center">
          <template slot-scope="scope">
            <el-button
              :disabled="scope.row.publishState === 0"
              :underline="false"
              type="text"
              @click="remove(scope.row.id)"
            >
              删除
            </el-button>
            <el-button
              :underline="false"
              type="text"
              @click="handleStatus(scope.row)"
            >
              <span v-if="scope.row.publishState === 1"> 上架</span>
              <span v-else>下架</span>
            </el-button>
            <el-button
              :underline="false"
              type="text"
              @click="
                $router.push({ path: 'new', query: { id: scope.row.id } })
              "
              :disabled="scope.row.publishState === 0"
            >
              修改
            </el-button>

            <el-button
              :underline="false"
              type="text"
              @click="checked(scope.row)"
              :disabled="scope.row.chkState !== 0"
              >审核
            </el-button>
            <el-button
              :underline="false"
              type="text"
              @click="preview(scope.row)"
            >
              预览
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="changeSize"
        @current-change="changePager"
        :current-page="reqParams.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="reqParams.pagesize"
        layout=" prev, pager, next, sizes,jumper"
        :total="total"
        class="pager"
        background
      >
      </el-pagination>
    </el-card>
    <!-- end-->
    <!-- 题目预览弹层 -->
    <el-dialog :visible.sync="centerDialogVisible" width="60%" title="题目预览">
      <questionsPreview :tableData="ruleForm"></questionsPreview>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="
            (centerDialogVisible = false),
              (randomsCheckList = []),
              (randomsRadio = '')
          "
        >
          关闭
        </el-button>
      </span>
    </el-dialog>
    <!-- 题目审核对话框 -->
    <!-- 审核 -->
    <questions-check
      ref="questionCheck"
      :data="questionInfo"
      @updateList="getList()"
    ></questions-check>
  </div>
</template>

<script>
import {
  choice as questionList,
  remove as removeQuestions,
  detail,
  choicePublish
} from '@/api/hmmm/questions'
import { simple as subjectList } from '@/api/hmmm/subjects'
import { simple as userList } from '@/api/base/users'
import { simple as tagList } from '@/api/hmmm/tags'
import { simple as directoryList } from '@/api/hmmm/directorys'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { provinces as getCity, citys as getArea } from '@/api/hmmm/citys.js'
import questionsPreview from './../components/questions-preview'
import QuestionsCheck from '../components/questions-check'
export default {
  name: 'questionsChoice',
  components: {
    questionsPreview,
    QuestionsCheck
  },
  computed: {
    difficulty () {
      return difficulty
    },
    questionType () {
      return questionType
    },
    publishType () {
      // eslint-disable-next-line no-undef
      return publishType
    },
    direction () {
      return direction
    }
  },
  data () {
    return {
      questionInfo: {},
      questions: [], // 保存底部的数据
      total: 0,
      reqParams: {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        page: 1,
        pagesize: 5,
        chkState: 'all'
      },
      // 学科选项
      subjectOptions: [],
      // 难度选项
      diffOptions: difficulty,
      // 试题类型选项
      questionTypeOptions: questionType,
      // 标签选项
      tagOptions: [],
      // 城市
      cityOptions: getCity(),
      // 地区 当选择了城市的时候赋值
      areaOptions: [],
      // 方向选项
      directionOptions: direction,
      // 录入人
      userOptions: [],
      // 目录
      directoryOptions: [],
      centerDialogVisible: false, // 弹出框的显示隐藏
      dialogFormVisible: false,
      ruleForm: {} // 表单数据
    }
  },
  async created () {
    // 学科下拉选项
    const { data: subjectArr } = await subjectList()
    this.subjectOptions = subjectArr
    // 用户
    const { data: userArr } = await userList()
    this.userOptions = userArr
    this.getList()
  },
  methods: {
    // 当前页
    changePager (newPage) {
      this.clear()
      this.reqParams.page = newPage
      this.getList()
    },
    // 每页条数
    changeSize (newSize) {
      this.reqParams.page = 1
      this.reqParams.pagesize = newSize
      this.getList()
    },
    // Tab栏切换
    handleClick () {
      this.reqParams.page = 1
      this.getList()
    },
    // 获取精选题库列表
    async getList () {
      const params = { ...this.reqParams }
      if (params.chkState === 'all') params.chkState = null
      const { data: questionsData } = await questionList(params)
      this.questions = questionsData.items
      this.total = questionsData.counts
    },
    // 清除功能
    clear () {
      this.reqParams.pagesize = 5
      for (const key in this.reqParams) {
        if (key !== 'page' && key !== 'pagesize') this.reqParams[key] = null
      }
    },
    // 搜索功能
    handleFilter () {
      this.reqParams.pagesize = 1
      this.getList()
    },
    // 删除功能
    remove (id) {
      this.$confirm('此操作将永久删除该试题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await removeQuestions({ id })
          this.$message.success('删除成功')
          this.getList()
        })
        .catch(e => {})
    },
    // 预览功能
    async  preview (id) {
      console.log(id, '12342312323232')

      try {
        const data = await detail(id)
        console.log(data, 'data980')
        this.ruleForm = data.data
        // console.log(this.ruleForm, 'this.da8888')
        this.centerDialogVisible = true
      } catch (err) {
        console.log(err)
      }
    },
    // 审核功能
    async checked (questionInfo) {
      this.questionInfo = questionInfo
      this.$nextTick(() => {
        this.$refs.questionCheck.open()
      })
    },
    // 上架、下架
    handleStatus (row) {
      this.$confirm(
        row.publishState ? '您确认上架该试题吗?' : '您确认下架该试题吗?',
        '提示',
        {
          type: 'warning'
        }
      )
        .then(async () => {
          if (row.publishState === 0) {
            row.publishState = 1
          } else {
            row.publishState = 0
          }
          await choicePublish({
            id: row.id,
            publishState: row.publishState
          })
          this.$message({
            type: 'success',
            message: row.publishState === 0 ? '上架成功' : '下架成功'
          })
          this.getList()
        })
        .catch(err => {
          console.log(err)
          this.$message.info('已取消操作!')
        })
    },
    // 选择城市
    handleCity (cityName) {
      // 地区选中的数据清空
      this.reqParams.city = null
      // 获取城市下的地区赋值给areaOptions
      this.areaOptions = getArea(cityName)
    },
    // 选择学科查询目录和标签的下拉选项数据
    async changeSubject (subjectID) {
      this.reqParams.catalogID = null
      this.reqParams.tags = null
      if (subjectID) {
        // 获取目录
        const { data: directoryArr } = await directoryList({ subjectID })
        this.directoryOptions = directoryArr
        // 标签下拉选项
        const { data: tagArr } = await tagList({ subjectID })
        this.tagOptions = tagArr
      } else {
        this.directoryOptions = []
        this.tagOptions = []
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.oop{
  color: red;
  font-size: 25px;
}
.container-questionsChoice {
  padding: 10px 15px;
  .el-card {
    .el-button {
      float: right;
      margin-bottom: 15px;
    }
    .el-form {
      margin-top: 60px;
      .el-form-item {
        .city {
          width: 158px !important;
        }
      }
    }
    .el-row {
      margin-bottom: 10px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 4px;
      .el-button {
        margin-right: 5px;
      }
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .row-bg {
      padding: 0;
    }
    .el-input {
      width:100%!important;

    }
    .el-select {
      width:100%!important;

    }
  }
  .pager {
    margin-top: 15px;
    margin-bottom: 15px;
    float: right;
  }
}
.el-button {
  margin-right: 5px;
}
</style>
